/**
 * 
 */

Ext.setup({
	icon : 'img/icon.png',
	tabletStartupScreen : 'img/tablet_startup.png',
	phoneStartupScreen : 'img/phone_startup.png',
	glossOnIcon : false,

	onReady : function() {

		Ext.regModel('ListItem', {
			idProperty : 'text',
			fields : [ {
				name : 'text',
				type : 'string'
			}, {
				name : 'link',
				type : 'string'
			}, {
				name : 'description',
				type : 'string'
			} ]
		});

		var store = new Ext.data.TreeStore({
			model : 'ListItem',
			proxy : {
				type : 'ajax',
				url : '/myblog/list',
				reader : {
					type : 'tree',
					root : 'items'
				}
			}
		});

		var topbar = new Ext.Toolbar({
			dock : 'top',
			scroll : 'horizontal',
			items : [ {
				iconMask : true,
				ui : 'plain',
				iconCls : 'user',
				handler : function(btn, event) {
					loginform.setCentered(true);
					loginform.show();
				}
			}, {
				iconMask : true,
				ui : 'plain',
				iconCls : 'settings'
			} ]
		});

		var loginform = new Ext.form.FormPanel({
			scroll : 'vertical',
			floating : true,
			modal : true,
			items : [ {
				xtype : 'fieldset',
				title : '用户登录信息',
				instructions : 'Please enter the information above',
				defaults : {
					required : true,
					labelAlign : 'left',
					labelWidth : '40%'
				},
				items : [ {
					xtype : 'textfield',
					name : 'name',
					label : '用户名',
					useClearIcon : true,
					autoCapitalize : false
				}, {
					xtype : 'passwordfield',
					name : 'password',
					label : '密码',
					useClearIcon : false
				} ]
			} ],
			dockedItems : {
				xtype : 'toolbar',
				dock : 'bottom',
				items : [ {
					text : 'Reset',
					handler : function() {

					}
				}, {
					text : 'Save',
					ui : 'confirm',
					handler : function() {
					}
				} ]
			}
		});
		
		var addform = new Ext.form.FormPanel({
			scroll : 'vertical',
			floating : true,
			modal : true,
			items : [ {
				xtype : 'fieldset',
				title : '添加新的RSS订阅',
				instructions : 'Please enter the information above',
				defaults : {
					required : true,
					labelAlign : 'left',
					labelWidth : '40%'
				},
				items : [ {
					xtype : 'textfield',
					name : 'title',
					label : '标题',
					useClearIcon : true,
					autoCapitalize : false
				}, {
					xtype : 'urlfield',
					name : 'url',
					label : '链接',
					useClearIcon : false
				} ]
			} ],
			dockedItems : {
				xtype : 'toolbar',
				dock : 'bottom',
				items : [ {
					text : 'Reset',
					handler : function() {

					}
				}, {
					text : 'Save',
					ui : 'confirm',
					handler : function() {
					}
				} ]
			}
		});
		

		var bottombar = new Ext.Toolbar({
			dock : 'bottom',
			defaults : {
				ui : 'plain',
				iconMask : true
			},
			scroll : 'horizontal',
			sortable : true,
			layout : {
				pack : 'center'
			},
			items : [ {
				iconCls : 'add',
				handler : function(btn, event) {
					addform.setCentered(true);
					addform.show();
				}
			}, {
				iconCls : 'trash'
			}, {
				iconCls : 'refresh'
			}, {
				iconCls : 'favorites'
			}, {
				iconCls : 'action'
			} ]
		});

		var nestedList = new Ext.NestedList({
			fullscreen : true,
			title : '我的订阅博客',
			displayField : 'text',
			dockedItems : [ topbar, bottombar ],
			store : store,
			getDetailCard : function(record, parentRecord) {
				return new Ext.ux.DescBox({
					value : 'Loading...',
					scroll : {
						direction : 'both',
						eventTarget : 'parent'
					}
				});
			}
		});

		nestedList.on('leafitemtap', function(subList, subIdx, el, e,
				detailCard) {
			var ds = subList.getStore(), r = ds.getAt(subIdx);
			detailCard.setValue(r.get("description"));

		});

	}
});


Ext.ux.DescBox = Ext.extend(Ext.Component, {
	scroll : 'vertical',
	cls : 'ux-code',
	fmt : '<span class="ux-code-{0}">{1}</span>',
	
	getValue : function() {
		return this.value;
	},

	afterRender : function() {
		Ext.ux.DescBox.superclass.afterRender.apply(this, arguments);

		this.description = this.getTargetEl().createChild({
			tag : 'pre',
			html : this.value
		});
	},

	setValue : function(description) {
		this.value = description;
		if (this.rendered) {
			this.description.update(this.value);
		}
	}
});